{% extends 'cinema/admin/base_admin.html' %}
{% load static %}

{% block title %}添加电影 - 电影院票务管理系统{% endblock %}
{% block page_title %}添加电影{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="fas fa-plus me-2"></i>添加电影</h2>
        <p class="text-muted mb-0">添加新的电影信息到系统中</p>
    </div>
    <a href="{% url 'movie_management' %}" class="btn btn-outline-secondary btn-admin">
        <i class="fas fa-arrow-left me-2"></i>返回列表
    </a>
</div>

<!-- 添加电影表单 -->
<div class="admin-card">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>电影信息</h5>
    </div>
    <div class="card-body">
        <form method="post" enctype="multipart/form-data" id="movieForm">
            {% csrf_token %}
            
            <div class="row">
                <!-- 基本信息 -->
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.title.id_for_label }}" class="form-label">
                                <i class="fas fa-film me-1"></i>电影名称 <span class="text-danger">*</span>
                            </label>
                            {{ form.title }}
                            {% if form.title.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.title.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.director.id_for_label }}" class="form-label">
                                <i class="fas fa-user me-1"></i>导演 <span class="text-danger">*</span>
                            </label>
                            {{ form.director }}
                            {% if form.director.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.director.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.genre.id_for_label }}" class="form-label">
                                <i class="fas fa-tags me-1"></i>类型 <span class="text-danger">*</span>
                            </label>
                            {{ form.genre }}
                            {% if form.genre.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.genre.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.duration.id_for_label }}" class="form-label">
                                <i class="fas fa-clock me-1"></i>时长（分钟） <span class="text-danger">*</span>
                            </label>
                            {{ form.duration }}
                            {% if form.duration.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.duration.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.price.id_for_label }}" class="form-label">
                                <i class="fas fa-dollar-sign me-1"></i>票价 <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                {{ form.price }}
                            </div>
                            {% if form.price.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.price.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.release_date.id_for_label }}" class="form-label">
                                <i class="fas fa-calendar me-1"></i>上映日期 <span class="text-danger">*</span>
                            </label>
                            {{ form.release_date }}
                            {% if form.release_date.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.release_date.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.actors.id_for_label }}" class="form-label">
                            <i class="fas fa-users me-1"></i>主演演员
                        </label>
                        {{ form.actors }}
                        <div class="form-text">多个演员请用逗号分隔</div>
                        {% if form.actors.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.actors.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">
                            <i class="fas fa-align-left me-1"></i>电影简介
                        </label>
                        {{ form.description }}
                        {% if form.description.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.description.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 海报上传 -->
                <div class="col-lg-4">
                    <div class="mb-3">
                        <label for="{{ form.poster.id_for_label }}" class="form-label">
                            <i class="fas fa-image me-1"></i>电影海报
                        </label>
                        <div class="border rounded p-3 text-center" id="posterPreview">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-2">点击上传海报</p>
                            <small class="text-muted">支持 JPG, PNG, WEBP 格式</small>
                        </div>
                        {{ form.poster }}
                        {% if form.poster.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.poster.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.rating.id_for_label }}" class="form-label">
                            <i class="fas fa-star me-1"></i>初始评分
                        </label>
                        <div class="input-group">
                            {{ form.rating }}
                            <span class="input-group-text">/ 10</span>
                        </div>
                        {% if form.rating.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.rating.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            {{ form.is_active }}
                            <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                <i class="fas fa-eye me-1"></i>立即上映
                            </label>
                        </div>
                        <div class="form-text">勾选后电影将立即在系统中显示</div>
                    </div>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="row mt-4">
                <div class="col-12">
                    <hr>
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{% url 'movie_management' %}" class="btn btn-outline-secondary btn-admin">
                            <i class="fas fa-times me-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-primary btn-admin">
                            <i class="fas fa-save me-2"></i>保存电影
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 预览卡片 -->
<div class="admin-card mt-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-eye me-2"></i>预览效果</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div id="previewPoster" class="card-img-top bg-secondary d-flex align-items-center justify-content-center" 
                         style="height: 300px;">
                        <i class="fas fa-film fa-3x text-white"></i>
                    </div>
                    <div class="card-body">
                        <h5 id="previewTitle" class="card-title">电影名称</h5>
                        <p id="previewGenre" class="card-text text-muted">类型</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span id="previewRating" class="badge bg-warning text-dark">
                                <i class="fas fa-star me-1"></i>0.0
                            </span>
                            <span id="previewPrice" class="badge bg-success">¥0</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <h6>电影信息预览</h6>
                <p><strong>导演：</strong><span id="previewDirector">-</span></p>
                <p><strong>主演：</strong><span id="previewActors">-</span></p>
                <p><strong>时长：</strong><span id="previewDuration">-</span></p>
                <p><strong>上映日期：</strong><span id="previewReleaseDate">-</span></p>
                <p><strong>简介：</strong></p>
                <p id="previewDescription" class="text-muted">-</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表单样式优化
document.addEventListener('DOMContentLoaded', function() {
    // 为所有表单控件添加 Bootstrap 样式
    const formControls = document.querySelectorAll('input, select, textarea');
    formControls.forEach(control => {
        if (!control.classList.contains('form-check-input')) {
            control.classList.add('form-control');
        }
    });
    
    // 海报上传预览
    const posterInput = document.getElementById('{{ form.poster.id_for_label }}');
    const posterPreview = document.getElementById('posterPreview');
    const previewPoster = document.getElementById('previewPoster');
    
    posterInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                posterPreview.innerHTML = `
                    <img src="${e.target.result}" class="img-fluid rounded" style="max-height: 200px;">
                    <p class="mt-2 mb-0 text-muted">${file.name}</p>
                `;
                previewPoster.innerHTML = `<img src="${e.target.result}" class="img-fluid" style="height: 100%; object-fit: cover;">`;
            };
            reader.readAsDataURL(file);
        }
    });
    
    // 实时预览
    const titleInput = document.getElementById('{{ form.title.id_for_label }}');
    const directorInput = document.getElementById('{{ form.director.id_for_label }}');
    const genreInput = document.getElementById('{{ form.genre.id_for_label }}');
    const durationInput = document.getElementById('{{ form.duration.id_for_label }}');
    const priceInput = document.getElementById('{{ form.price.id_for_label }}');
    const ratingInput = document.getElementById('{{ form.rating.id_for_label }}');
    const actorsInput = document.getElementById('{{ form.actors.id_for_label }}');
    const releaseDateInput = document.getElementById('{{ form.release_date.id_for_label }}');
    const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
    
    function updatePreview() {
        document.getElementById('previewTitle').textContent = titleInput.value || '电影名称';
        document.getElementById('previewDirector').textContent = directorInput.value || '-';
        document.getElementById('previewGenre').textContent = genreInput.value || '类型';
        document.getElementById('previewDuration').textContent = durationInput.value ? durationInput.value + '分钟' : '-';
        document.getElementById('previewPrice').textContent = priceInput.value ? '¥' + priceInput.value : '¥0';
        document.getElementById('previewRating').innerHTML = `<i class="fas fa-star me-1"></i>${ratingInput.value || '0.0'}`;
        document.getElementById('previewActors').textContent = actorsInput.value || '-';
        document.getElementById('previewReleaseDate').textContent = releaseDateInput.value || '-';
        document.getElementById('previewDescription').textContent = descriptionInput.value || '-';
    }
    
    [titleInput, directorInput, genreInput, durationInput, priceInput, ratingInput, actorsInput, releaseDateInput, descriptionInput].forEach(input => {
        input.addEventListener('input', updatePreview);
    });
    
    // 表单验证
    const form = document.getElementById('movieForm');
    form.addEventListener('submit', function(e) {
        let isValid = true;
        
        // 检查必填字段
        const requiredFields = [titleInput, directorInput, genreInput, durationInput, priceInput, releaseDateInput];
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('请填写所有必填字段');
        }
    });
});
</script>
{% endblock %} 